/* checkbox
*/
.el-checkbox {
  --checkbox-size-large: 48px;
  --checkbox-size-medium: 36px;
  --checkbox-size-small: 24px;
  --checkbox-input-size-large: 22px;
  --checkbox-input-size-medium: 20px;
  --checkbox-input-size-small: 18px;
  --el-checkbox-text-color: var(--text-content-darkest);
  --el-checkbox-input-bg-color: var(--white);
  --el-checkbox-input-border-color: var(--surface-neutral-tertiary-rest);
  --el-checkbox-input-border-color-hover: var(--surface-neutral-tertiary-rest);
  --checkbox-checked-color: var(--text-cta-rest);
  height: var(--checkbox-size-medium);
  .el-checkbox__label {
    @apply text-body-2;
  }
  .el-checkbox__input {
    .el-checkbox__inner {
      width: var(--checkbox-input-size-medium);
      height: var(--checkbox-input-size-medium);
      border-width: 2px;
      border-radius: 4px;
      background-color: transparent;
      &:after {
        top: -3px;
        left: 3px;
        width: 10px;
        height: 20px;
        border-width: 4px;
      }
    }
    .el-checkbox__original:focus-visible + .el-checkbox__inner {
      outline: 2px solid var(--stroke-border-cta-focused);
    }
    &.is-checked {
      .el-checkbox__inner {
        border-width: 0;
        background: var(--checkbox-checked-color);
        &:after {
          transform: rotate(45deg) scale(0.5);
        }
      }
      & + .el-checkbox__label {
        color: var(--text-content-darkest);
      }
    }
    &.is-indeterminate {
      .el-checkbox__inner {
        border-width: 0;
        background: var(--checkbox-checked-color);
        &:before {
          top: 8px;
          height: 4px;
        }
      }
      & + .el-checkbox__label {
        color: var(--text-content-darkest);
      }
    }
    &.is-disabled {
      .el-checkbox__inner {
        border-color: var(--stroke-border-cta-disabled);
        background-color: transparent;
      }
      &.is-checked {
        .el-checkbox__inner {
          background-color: var(--surface-filled-disabled);
          &:after {
            border-color: var(--text-cta-disabled);
          }
        }
      }
      & + span.el-checkbox__label {
        color: var(--text-content-soft);
      }
    }
  }
  &.el-checkbox--large {
    height: var(--checkbox-size-large);
    .el-checkbox__label {
      @apply text-body-1;
    }
    .el-checkbox__inner {
      width: var(--checkbox-input-size-large);
      height: var(--checkbox-input-size-large);
      &:after {
        width: 11px;
        height: 22px;
      }
    }
  }
  &.el-checkbox--small {
    height: var(--checkbox-size-small);
    .el-checkbox__label {
      @apply text-body-2;
    }
    .el-checkbox__inner {
      width: var(--checkbox-input-size-small);
      height: var(--checkbox-input-size-small);
      &:after {
        width: 9px;
        height: 18px;
      }
    }
    .el-checkbox__input {
      &.is-indeterminate {
        .el-checkbox__inner {
          &:before {
            top: 7px;
          }
        }
      }
    }
  }
}

.segmented-control {
  @apply rounded-lg p-1 inline-flex items-center flex-wrap gap-1;
  background-color: var(--surface-neutral-secondary-rest);
  .el-checkbox-button {
    .el-checkbox-button__original {
      &:checked + .el-checkbox-button__inner {
        background-color: var(--surface-neutral-primary-rest);
        box-shadow: none;
        color: var(--text-cta-rest);
      }
    }
    .el-checkbox-button__inner {
      @apply inline-flex items-center gap-1 bg-transparent border-0 rounded p-2 text-label-2;
      color: var(--text-content-soft);
      .el-icon {
        font-size: 16px;
        &:not(:last-child) {
          @apply mr-1;
        }
      }
    }
  }
}
